<html>
  <!--
   tbdgadget.html: A compact, gadget format display. Can be embedded with an iframe.

   Copyright 2011 Portland Transport

   Licensed under the Apache License, Version 2.0 (the "License");
   you may not use this file except in compliance with the License.
   You may obtain a copy of the License at

     http://www.apache.org/licenses/LICENSE-2.0

   Unless required by applicable law or agreed to in writing, software
   distributed under the License is distributed on an "AS IS" BASIS,
   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
   See the License for the specific language governing permissions and
   limitations under the License.

   Authors:
   Matt Conway: main code

   -->
	<head>
		<title>Transit Gadget(tm)</title>

                <script type="text/javascript" src="assets/js/fleegix.js"></script>
		<script type="text/javascript" src="assets/js/jquery-1.5.1.min.js"></script>
		<script type="text/javascript" src="assets/js/jquery-ui-1.8.7.custom.min.js"></script>
		<script type="text/javascript" src="assets/js/tzdate.js"></script>
		<script type="text/javascript" src="assets/js/trArrUtilities.js"></script>
		<script type="text/javascript" src="assets/js/trStopCache.js"></script>
		<script type="text/javascript" src="assets/js/trAgencyCache.js"></script>
		<script type="text/javascript" src="assets/js/trArr.js"></script>
		
		<link rel="stylesheet" href="tbdgadget.css" type="text/css" />

		
		<script type="text/javascript">
function initializePage (data) {
    // get the rights notice
    var rights_string = '';
    for (var agency in data.stopsConfig) {
	rights_string += data.agencyCache.agencyData(agency).rights_notice+" ";
    }
    jQuery('#rights').text(rights_string);
}

function displayPage(data) {
    global_Data = data;
    // Clear out the old arrivals
    jQuery('.arrivals').remove();
    jQuery('.stopName').remove();

    // First, sort by date and throw away arrivals that are more than two hours
    var bystop = data.arrivalsQueue.minutes(120).byStop();

    // Build up an array of the stop IDs
    // This way we can sort the array and have them in a consistent order
    // if we don't do this, whichever stop has the next arrival comes first.
    var stopIDs = [];
    for (var stop in bystop) {
	stopIDs.push(stop);
    }
    stopIDs.sort();

    stopIDs.forEach(function (stop) {
	var stopArrs = bystop[stop];
	// use toArray in case user is using a browser where subclassing Array breaks it
	var exampleArr = stopArrs.toArray()[0];
	var stopData = trStopCache().stopData(exampleArr.agency, exampleArr.stop_id);
	jQuery('#arrivals').append('<h3 class="stopName">' + stopData.stop_name + '</h3>');
	
	var html = '<table class="arrivals">';
	
	var bydest = stopArrs.byDest();
	for (var destID in bydest) {
	    var dest = bydest[destID];
	    // Save it so we can populate it below
	    html += '<tr class="arrival"><td class="dest">';
	    html += dest.toArray()[0].headsign + '</td><td class="time">';
	    dest.forEach( function (arr) {
		// Calculate time until arrival
		// (requires accurate local clock)
		// (TODO: this needs to fixed)
		var mins = arr.minutes();
		if (mins == 0) {
		    html += '<b>Arr</b>    ';
		}
		else {
		    html += mins + '&nbsp;min';
		}

		// check for flags
		if (arr.flags != undefined) {
		    arr.flags.forEach( function(flag) {
			// Renders to something like
			// <img src="assets/img/flags/bike.png" alt="[bike]" />
			html += '<img src="assets/img/flags/' + flag + '.png" alt="[' + flag + ']" />';
		    });
		}
		html += ' ';
	    });
	    html += '</td></tr>';
	}
	html += '</table>';
	jQuery('#arrivals').append(html);

	var lastUpdated = data.arrivalsQueue.lastUpdated();
	jQuery('#lastUpdate').text('last update: ' + lastUpdated.toString('h:mmtt'));
    });

    // place the advisories
    jQuery('.message').remove();
    var html = '';
    data.serviceMessages.forEach( function (msg) {
	html += '<span class="message">' + msg + '</span>'
    });
    jQuery('#messages').append(html);
    gdata = data;
}

jQuery(document).ready(function () {
    jQuery.noConflict(); // All Transit Appliance stuff is using this
    trArr({
	configString: window.location.search, // This seems an elegant way to pass it in
	displayInterval: 30*1000, // ms, don't want to overtax users' systems, since this gadget may be up 24/7
	displayCallback: function (data) {
	    if (data.displayCallCount == 0) {
		initializePage(data);
	    }
	    displayPage(data);
	}});
});

</script>
	</head>
	
	<body>
	  <div id="arrivals"></div>
	  <div id="messages"></div>
	  <div id="lastUpdate"></div>
	  <div id="rights"></div>
	</body>
</html>

